<!--
 @description 文本输入弹窗
 @fileName index.vue
 @author zengqiongying
 @created 2022/10/30 13:19:38
-->
<template>
  <Popup v-model="popShow" position="bottom" :title="title" :show-cancel-button="false" @confirm="onSubmit">
    <van-form ref="form" @submit="onSubmit">
      <div class="remark-content">
        <qmp-field
          v-model="content"
          type="textarea"
          row="5"
          label=""
          placeholder="请输入"
          :maxlength="maxlength"
          show-word-limit
          :rules="rules"
        />
      </div>
    </van-form>
  </Popup>
</template>

<script lang="ts">
  import Popup from '@/components/Popup/index.vue'
  import { reactive, toRefs, computed, watch, getCurrentInstance, defineComponent } from 'vue'
  export default defineComponent({
    name: 'PopField',
    components: { Popup },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      modelValue: {
        type: String,
        default: ''
      },
      maxlength: {
        type: Number,
        default: 200
      },
      required: {
        type: Boolean,
        default: false
      },
      rules: {
        type: Array,
        default: () => []
      }
    },
    setup(props, { emit }) {
      const { proxy }: any = getCurrentInstance()
      const datas = reactive({
        content: ''
      })
      const popShow = computed({
        set(val) {
          emit('update:show', val)
        },
        get() {
          return props.show
        }
      })
      watch(
        () => props.modelValue,
        (val: string) => {
          datas.content = val
        },
        {
          immediate: true
        }
      )
      const onSubmit = () => {
        const content = datas.content.trim()
        if (props.required) {
          if ([null, undefined, ''].includes(content)) {
            proxy.$toast('请输入内容')
            return
          }
        }
        emit('update:modelValue', content)
        popShow.value = false
      }
      return {
        ...toRefs(datas),
        popShow,
        onSubmit
      }
    }
  })
</script>
<style lang="less" scoped>
  .remark-content {
    padding: 20px 12px 10px;
    border-radius: 12px;
    background: var(--bg-global-weak);
    border: 1px solid var(--divisionline-normal);
    box-sizing: border-box;
    margin-bottom: 16px;
    .van-cell {
      padding: 0;
      font: var(--font-main-body);
    }
  }
</style>
